﻿@inject AppState appState

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorEssentials Test</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@(collapseNavMenu ? "collapse" : null)" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        @foreach (var items in appState.NavItems.Where(c => c.AllowAnonymous).GroupBy(c => c.Category))
        {
            if (!string.IsNullOrWhiteSpace(items.Key))
            {
                <li class="nav-header">@items.Key</li>
            }
            @foreach (var item in items)
            {

                if (!item.IsVisible) continue;
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="@item.Url" @onclick="@(() => appState.CurrentNavItem = item)" Match="NavLinkMatch.All">
                        <i class="@item.Icon"></i>@item.Text
                    </NavLink>
                </li>
            }
        }
    </ul>
</div>

@functions {
    bool collapseNavMenu = true;

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    protected override async Task OnInitializedAsync()
    {
        //RWM: Make sure the NavMenu re-renders when the CurrentUser changes.
        appState.PropertyChanged += (sender, e) =>
        {
            this.StateHasChanged();
        };

        await Task.FromResult(true);
    }

}